<template>
  <el-menu
    :default-active="defaultActive"
    :default-openeds="[defaultOpeneds]"
    class="el-menu-vertical"
    router
  >
    <SettingMenuItem :settingMenuList="settingMenuList" />
  </el-menu>
</template>

<script setup>
import { onBeforeMount, ref, watch } from "vue";
import { useRoute } from "vue-router";
import SettingMenuItem from "./SettingMenuItem.vue";
const route = useRoute();
const settingMenuList = ref(null);
const defaultActive = ref("");
const defaultOpeneds = ref("");

onBeforeMount(() => {
  settingMenuList.value = route.matched[1].children;
});

watch(
  () => route.matched,
  (newVal) => {
    if (newVal.length > 3) {
      defaultActive.value = newVal[newVal.length - 1].path;
      defaultOpeneds.value = newVal[newVal.length - 2].path;
    } else {
      defaultActive.value = newVal[newVal.length - 1].path;
      defaultOpeneds.value = "";
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>

<style lang="scss" scoped>
.el-menu {
  height: 100%;
}
</style>
